<template>
  <div>
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- <span>以下地址超出配送范围</span> -->
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      @select="send"
    />
    <!-- 增加 -->
    <van-popup
      v-model:show="show1"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
    <!-- 修改 -->
    <van-popup
      v-model:show="show2"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onEditAddress"
        :address-info="dataList"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  addAddress,
  getAddressList,
  updateAddress,
  deleteAddress,
} from "../../service/address.js";

import { areaList } from "@vant/area-data"; // 中国省市区数据
export default {
  data() {
    return {
      areaList: [],   // 地区列表、测试列表
      searchResult: [],  // 搜索的地址信息
      show1: false, // 增加
      show2: false, // 修改
      chosenAddressId: "1", // 地址id
      form: {
        userid: "",
        name: "",
        tel: "",
        province: "", // 省
        city: "", //市
        county: "", // 区
        addressDetail: "", // 详细地址
        isDefault: false, // 默认地址
      },
      dataList: [],  // 存储要修改或删除的数据

      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
    };
  },
  created() {
    this.areaList = areaList;
    this.form.userid = this.$store.state.userInfo.data.userid;
    console.log(this.form.userid);
    // getAddressList(this.form.userid).then((res) => {
    //   console.log(res.data);
    // });
    this.getNewAddressList(); // 获取地址列表
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    send(val) {  // 发送地址
      console.log(val); 
    },
    onAdd() {
      this.show1 = true;
    },
    onEdit(item, index) {
      // item 修改的当前数据信息；  index 修改商品所在的索引
      this.show2 = true;
      // console.log(item);  
      this.dataList = item;  // 存储要修改或删除的数据
    },
    onSave(val) {  // 保存新增的地址信息
      // console.log(val);  // val为新增的地址信息
      let test = {
        userid: this.form.userid,
        name: val.name,
        tel: val.tel,
        province: val.province,
        city: val.city,
        county: val.county,
        addressDetail: val.addressDetail,
        isDefault: val.isDefault,
      };
      addAddress(test).then((res) => {   // 添加新地址
        console.log(res);
        if (res.data.code === "200") {
          this.show1 = false;
          this.getNewAddressList();   // 获取地址列表
        }
      });
    },
    onEditAddress(val) {  // 修改地址信息
      // console.log(val);  // val 为当前要修改的数据信息
      // 修改请求
      updateAddress(val).then((res) => {
        if (res.data.code === "200") {
          this.show2 = false;
          this.getNewAddressList();
        }
      });
    },
    onDelete() {
      deleteAddress(this.dataList.addressid).then((res) => {
        if (res.data.code === "200") {
          this.show2 = false;
          this.getNewAddressList();
        }
      });
    },
    onChangeDetail(val) {  // 改变详细地址
      console.log(val);
      this.send();
      // if (val) {
      //   searchResult.value = [
      //     {
      //       name: '黄龙万科中心',
      //       address: '杭州市西湖区',
      //     },
      //   ];
      // } else {
      //   searchResult.value = [];
      // }
    },

    // 获取地址列表
    getNewAddressList() {
      //更新地址列表
      let arr = {};
      this.list = [];
      getAddressList(this.form.userid).then((res) => {
        console.log(res.data.data);
        res.data.data.forEach((item, index) => {
          arr.id = `${index + 1}`;
          arr.name = item.name;
          arr.tel = item.tel;
          arr.address =
            item.province + item.city + item.county + item.addressDetail;
          arr.isDefault = item.isDefault;
          arr.addressid = item.addressid;
          arr.province = item.province;
          arr.city = item.city;
          arr.county = item.county;
          arr.addressDetail = item.addressDetail;
          this.list.push({ ...arr });  // 地址列表
        });
        console.log(this.list);
      });
    },
  },
};
</script>
<style scoped>
span {
  font-size: 14px;
  color: gray;
  padding: 50px 0px 0px 20px;
}
* {
  padding: 0;
  margin: 0;
}
.box {
  padding-bottom: 2rem;
  background-color: rgb(246, 246, 246);
}
</style>
